/**
 * 生命周期
 * 1. 又名:生命周期回调函数,生命周期函数,生命周期钩子
 * 2. 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
 * 3. 生命周期函数的名字不可更改,但函数的具体内容可根据需求来写.
 * 4. 生命周期函数中的this指向是vm或者组件实例
 */


/**
 * 生命周期函数
 * 1. beforeCrete  此时无法通过vm访问到data中的数据,methods中的方法
 * 2. created  可以通过vm访问到data中的数据,methods中配置的方法
 * 3. beforeMount 页面呈现的是未经VUe编译的DOM结构,所有对DOM的操作都无效.
 * 4. mounted
 *   - 页面中呈现的是经过编译的DOM
 *   - 对DOM的操作都有效(尽可能避免)
 *   - 至此,初始化过称结束,一般在此进行:
 *      - 开启定时器
 *      - 发送网络请求
 *      - 订阅消息
 *      - 绑定自定义事件等
 * 5. beforeUpdate 此时页面是旧的,数据是新的,即页面和数据尚未同步
 * 6. updated 数据是新的,页面也是新的,数据页面同步
 * 7. beforeDestroy
 *   - 此时vm中的所有data,methods,指令等都处于可用状态,马上要销毁过程
 *   - 一般在此阶段,关闭定时器,取消订阅消息,解绑自定义事件等收尾工作
 * 8. destory
 *
 */
// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;

// 注册全局VUe指令
// Vue.directive('big',function (element, binding) {
// 	// 何时调用? 1.绑定成功时,2.指令所在模板被重新解析时
// 	element.innerText = binding.value * 10
// });
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	data: {// data用于存储数据,数据供el指定的容器使用,
		n: 1
	},
	beforeCreate() {
		console.log('beforeCreate', this)
		debugger;
	},
	created() {
		console.log('created', this)
	},
	beforeMount() {
		console.log('beforeMount', this)
	},
	mounted() {
		console.log('mounted', this)
		this.setStart();
	},
	beforeUpdate() {
		console.log('beforeUpdate', this)
	},
	updated() {
		console.log('updated', this)
	},
	beforeDestroy() {
		console.log('beforeDestroy', this)
	},
	destroyed() {
		console.log('destroyed', this)
	},
	methods: {
		add() {
			console.log('add')
			this.n++;
		},
		setStart() {
			document.write('开始了')
		},
		destroy() {
			this.$destroy();
		}
	}
});
